<template>
  <a-layout id="zh-basic-layout-default">
    <a-layout-sider v-model="collapsed"
                    :trigger="null"
                    class="zh-menu-sider"
                    collapsible>
      <div class="logo" />
      <a-menu theme="dark"
              mode="inline"
              :default-selected-keys="['1']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span>nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding:0px 20px">
        <a-icon class="zh-nav-trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>

export default {
}
</script>

<style lang="less" scoped>
#zh-basic-layout-default {
  .zh-menu-sider {
    box-shadow: 2px 0 6px #00152959;
    position: relative;
    min-height: 100vh;
    flex: 0 0 256px !important;
    max-width: 256px !important;
    min-width: 256px !important;
    width: 256px !important;
  }
  .zh-nav-trigger {
    font-size: var(--font-size-20);
  }
  .logo {
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
  }
  .ant-layout-header {
    height: 64px;
  }
}
</style>